<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="login-container">
			<view class="bg"></view>
			<view class="flex justify-end navigation">
				<u-icon name="close" color="#fff" size="48" @tap="back"></u-icon>
			</view>

			<view class="login-form">
				<view class="title">账号密码登录</view>
				<u-form :model="form" ref="uForm" class="mt-30" label-width="30">
					<u-form-item prop="account" :border-bottom="false">
						<view class="form-item-wrapper">
							<u-input v-model="form.account"
								placeholder-style="font-size:28rpx;font-weight:600;color:#999"
								placeholder="请输入账号或则手机号码" />
						</view>
					</u-form-item>
					<u-form-item prop="password" :border-bottom="false">
						<view class="form-item-wrapper">
							<u-input type="password" v-model="form.password"
								placeholder-style="font-size:28rpx;font-weight:600;color:#999" placeholder="请输入账号密码"
								password-icon />
						</view>
					</u-form-item>
				</u-form>
				<view class="submit-btn" @tap="submit">登录</view>
				<view class="flex justify-between mt-30">
					<router-link to="/pages/forgetPassword/forgetPassword" class="forget-link">找回密码</router-link>
					<router-link to="/pages/register/register" class="register-link">我要开户</router-link>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {tabbarUrl} from "@/common/config.js"
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isShowPassword: false,
				form: {
					account: "",
					password: ""
				},
				rules: {
					account: [{
						required: true,
						message: '请输入账号或则手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入账号密码',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		methods: {
			...mapMutations("user", ['modifyUserInfo']),
			back() {
				this.$Router.back(1)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.loginApi(this.form).then(({
							userinfo
						}) => {
							this.modifyUserInfo(userinfo)
							let params={
								path:this.$Route.query.redirect ? this.$Route.query.redirect :
									"/pages/index/index"
							}
							if(this.$Route.query._query){
								params=Object.assign({},params,{query:this.$Route.query._query})
							}
							if(tabbarUrl.includes(params.path)){
								delete params.query
								this.$Router.pushTab(params)
							}
							else{
								this.$Router.replace(params)
							}
							
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.container {
		.status_bar {
			&::after {
				background: linear-gradient(128deg, #3B65E1 0%, #4571EC 100%);
			}
		}

		.login-container {
			padding: 0 30rpx;
			height: calc(100% - var(--status-bar-height));
			box-sizing: border-box;

			.navigation {
				height: 80rpx;
			}

			.bg {
				position: fixed;
				left: 0;
				width: 100%;
				top: var(--status-bar-height);
				height: 400rpx;
				background: linear-gradient(180deg, #3B65E1 0%, #4571EC 60%, #fff 100%);
			}

			.login-form {
				position: relative;
				padding: 50rpx 30rpx;
				margin-top: 60rpx;
				border-radius: 25rpx;
				height: calc(100% - 180rpx);
				background-color: #fff;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.form-item-wrapper {
					width: 100%;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					padding: 15rpx 30rpx;
					background: $color-gray;
					border-radius: 50rpx;
				}
			}

			.submit-btn {
				margin-top: 50rpx;
			}

			.forget-link {
				font-size: 24rpx;
				color: #333;
			}

			.register-link {
				color: $color-blue;
				font-size: 24rpx;
			}
		}
	}
</style>
